<template>
	<view class="person_bank">
		<view class="main">
			<view class="input">
				<view class="left">绑定状态</view>
				<view class="right color">已绑定</view>
			</view>
			<view class="input">
				<view class="left">开户银行</view>
				<view class="right" v-if="id==''">{{userinfo.openingbank_name}}</view>
				<view class="right" v-else>{{openingbank_name}}</view>
			</view>
			<view class="input">
				<view class="left">持卡人</view>
				<view class="right" v-if="id==''">{{userinfo.username}}</view>
				<view class="right" v-else>{{username}}</view>
			</view>
			<view class="input">
				<view class="left">银行卡号</view>
				<view class="right" v-if="id==''">{{userinfo.card_number}}</view>
				<view class="right" v-else>{{card_number}}</view>
			</view>
		</view>
		<!-- 底部 -->
		<BottomBtn title='修改' @submit='submitBtn' v-if="id==''"></BottomBtn>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import BottomBtn from '@/components/bottom_btn/bottom_btn.vue';
	export default {
		components:{
			BottomBtn
		},
		data() {
			return {
				id:"",
				username:'',
				openingbank_name:'',
				card_number:'',
			};
		},
		computed:{
			...mapState({
				userinfo: state => state.userinfo
			}),
		},
		onLoad(opt) {
			var that = this
			if(opt.id){
				that.id=opt.id
				that.$tips.showLoading('加载中')
				var params = {
					user_id:opt.id
				}
				that.$httpApi.userCard(params).then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						that.username=res.data.username
						that.openingbank_name=res.data.openingbank_name
						that.card_number=res.data.card_number
					}
				})
			}
		},
		methods:{
			// 底部按钮
			submitBtn(){
				uni.navigateTo({
					url:'/pages/person/person_bankcard_revise'
				})
			},
		}
	}
</script>

<style lang="less">
	.person_bank{
		width: 100%;
		padding-top: 24rpx;
		.main{
			width: 100%;
			padding: 20rpx 32rpx;
			background: #fff;
			.input{
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				.left{
					width: 200rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}
				.right{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #888888;
				}
				.color{
					color: #26C281;
				}
			}
		}
	}
</style>
